<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<svg width="150px" height="400px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-pacman" style="background: none;">
			<g ng-attr-style="display:{{config.showBean}}" style="display:block">
				<circle cx="59.0951" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="blue">
					<animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="2.1" begin="-1.4070000000000003s" repeatCount="indefinite"></animate>
					<animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="2.1" begin="-1.4070000000000003s" repeatCount="indefinite"></animate>
				</circle>
				<circle cx="79.4951" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="blue">
					<animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="2.1" begin="-0.6930000000000001s" repeatCount="indefinite"></animate>
					<animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="2.1" begin="-0.6930000000000001s" repeatCount="indefinite"></animate>
				</circle>
				<circle cx="39.2951" cy="50" r="4" ng-attr-fill="{{config.c2}}" fill="blue">
					<animate attributeName="cx" calcMode="linear" values="95;35" keyTimes="0;1" dur="2.1" begin="0s" repeatCount="indefinite"></animate>
					<animate attributeName="fill-opacity" calcMode="linear" values="0;1;1" keyTimes="0;0.2;1" dur="2.1" begin="0s" repeatCount="indefinite"></animate>
				</circle>
			</g>
			<g ng-attr-transform="translate({{config.showBeanOffset}} 0)" transform="translate(-15 0)">
				<path d="M50 50L20 50A30 30 0 0 0 80 50Z" ng-attr-fill="{{config.c1}}" fill="#f5bb16" transform="rotate(6.44271 50 50)">
					<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;45 50 50;0 50 50" keyTimes="0;0.5;1" dur="2.1s" begin="0s" repeatCount="indefinite"></animateTransform>
				</path>
				<path d="M50 50L20 50A30 30 0 0 1 80 50Z" ng-attr-fill="{{config.c1}}" fill="#f5bb16" transform="rotate(-6.44271 50 50)">
					<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-45 50 50;0 50 50" keyTimes="0;0.5;1" dur="2.1s" begin="0s" repeatCount="indefinite"></animateTransform>
				</path>
			</g>
		</svg>

		<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<rect x="50" y="50" width="100" height="50">
				<animate attributeType="XML" attributeName="x" from="50" to="300" dur="3s" begin="0.1s" restart="always" repeatCount="3">
				</animate>
			</rect>

			<circle cx="100" cy="300" r="30" style="fill:none;stroke-width:3;stroke:black">
				<animate attributeType="CSS" attributeName="fill" from="#000000" to="#F30" dur="5s" restart="always">
				</animate>
			</circle>
		</svg>
	</body>

</html>
</body>

</html>